<!--  -->
<template>
    <div style="display: flex;justify-content: space-between;">
        <a-form size="small" :model="pageData" layout="inline">
            <a-form-item label="审核员">
                <a-input class="bacClass" style="width:200px" v-model="pageData.employeeName" allow-clear></a-input>
            </a-form-item>
        </a-form>
        <Toolbar :items="['查询', '新增', '删除',]" @select="selectHandle" @add="addHandle" @del="deleteHandle">
        </Toolbar>
    </div>
    <div class="cssTable">
        <a-spin :loading="pageData.pageLoading" tip="加载中" dot style="height:100%;width: 100%;z-index:999 ;">
            <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                :style="{ height: pageData.rHeight - 200 + 'px' }" :suppressDragLeaveHidesColumns="true"
                rowSelection="multiple" @grid-ready="gridReady" :defaultColDef="defaultColDef" class='ag-theme-alpine'
                :rowData="pageData.tableList" :columnDefs="tableColumns" :localeText="localeText1">
            </AgGridVuesCopys>
        </a-spin>
    </div>
    <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
        @change="PageSize" @page-size-change="change1" style="justify-content: center;margin-top:12px;" :page-size="size"
        :current="page" />
    <a-drawer style="z-index: 999" ok-text="保存" cancel-text="关闭" :drawer-style="{ zIndex: 9999 }" :mask-closable="false"
        :width="400" :visible="pageData.showAdd" unmountOnClose @ok="sideOk" @cancel="pageData.showAdd = false">
        <template #title>
            {{ pageData.sideTitle }}
        </template>
        <div>
            <a-form ref="formRef" layout="horizontal" :model="dataForm">
                <a-form-item label-col-flex="80px" label="员工工号" field="employeeCode"
                    :rules="[{ required: true, message: '员工工号必填' }]" :validate-trigger="['change', 'blur']">
                    <a-select popup-container="html" allow-clear allow-search class="bacClass"
                        v-model="dataForm.employeeCode" @change="changeEmp(0)" @focus="getUsers('')"
                        @search="getUsers($event)">
                        <a-option v-for="(item, index) in pageData.empList" :value="item.code" :label="item.code"
                            :key="index">{{
                                item.code + '/' + item.name
                            }}
                        </a-option>
                    </a-select>
                </a-form-item>
                <a-form-item label-col-flex="80px" label="员工姓名" field="employeeName"
                    :rules="[{ required: true, message: '员工姓名必填' }]" :validate-trigger="['change', 'blur']">
                    <a-select popup-container="html" allow-clear allow-search class="bacClass"
                        v-model="dataForm.employeeName" @change="changeEmp(1)" @focus="getUsers('')"
                        @search="getUsers($event)">
                        <a-option v-for="(item, index) in pageData.empList" :value="item.name" :label="item.name"
                            :key="index">{{
                                item.code + '/' + item.name
                            }}
                        </a-option>
                    </a-select>
                </a-form-item>
                <a-form-item label-col-flex="80px" label="所属公司" field="employeeCode"
                    :rules="[{ required: true, message: '所属公司必填' }]" :validate-trigger="['change', 'blur']">
                   <a-input class="bacClass" disabled v-model="dataForm.companyName" />
                </a-form-item>
            </a-form>
        </div>
    </a-drawer>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import Toolbar from '@/components/Toolbar.vue'
import { post, get } from '@/api/http'
import { Message, Modal } from '@arco-design/web-vue'

import { localeText } from '@/api/aggridZw'
import { pagingList } from '@/api/paging'
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'

const pagingList1: any = ref(pagingList)
const localeText1: any = ref(localeText)
const pageData: any = reactive({
    showAdd: false,
    sideTitle: '',
    rHeight: 0,
    tableList: [],
    empList: [],
    pageLoading: false,
    employeeName: '',
})

const dataForm: any = reactive({
    companyId: null,
    companyName: '',
    employeeCode: '',
    employeeName: '',
})

const defaultColDef: any = {
    sortable: true,
    resizable: true,
    filter: true,
    flex: 1
}
const gridOption = ref()
const colState = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
    colState.value = params.columnApi
}

const tableColumns: any = [
    {
        headerName: '',
        checkboxSelection: true,
        headerCheckboxSelection: true,
        pinned: 'left',
        width: 50
    },
    { headerName: "员工工号", field: "employeeCode", width: 250, },
    { headerName: "员工姓名", field: "employeeName", width: 250, },
    { headerName: "所属公司", field: "companyName", width: 250, },
    // { headerName: "创建人", field: "createUser", width: 182, },
    { headerName: "创建时间", field: "createTime", width: 250, },
    {
        headerName: "操作",
        field: "action",
        width: 146,
        pinned: 'right',
        cellRenderer: {
            template: `<el-button style="color:#165dff;" link @click="c">修改</el-button>`,
            setup(props: any) {
                const c = () => {
                    editHanler(props.params.data)
                }
                return {
                    c,
                }
            },
        },
    }
]

//分页
const total = ref(0);
const page = ref(1);
const size = ref(10);
function PageSize(val: any) {
    page.value = val
    doRefresh();
}
function change1(val: any) {
    size.value = val
    doRefresh();
}

//查询
function doRefresh() {
    pageData.pageLoading = true
    post({
        url: "/qms/inspectionEmployee/pagedInspectionEmployees",
        data: {
            current: page.value,
            size: size.value,
            employeeName: pageData.employeeName
        }
    })
        .then(({ data, code }: any) => {
            if (code === 200) {
                pageData.tableList = data.records
                gridOption.value.setRowData(data.records)
                total.value = data.total;
            }
        })
        .catch(console.log).finally(() => {
            pageData.pageLoading = false
        })
}

const selectHandle = () => {
    page.value = 1
    doRefresh()
}

onMounted(() => {
    pageData.rHeight = document.getElementsByClassName("main-section")[0]?.clientHeight
    //弹出层的高
    if (pageData.rHeight !== undefined) {
        pageData.rHeight = pageData.rHeight;
    }
    doRefresh()
})

//新增
const addHandle = () => {
    if (dataForm.id) {
        delete dataForm.id
    }
    for (let item in dataForm) {
        dataForm[item] = ''
    }
    pageData.showAdd = true
    pageData.sideTitle = '新增SOP审核员'
}

//修改
const editHanler = (record: any) => {
    for (let item in dataForm) {
        dataForm[item] = record[item]
    }
    dataForm.id = record.id
    pageData.showAdd = true
    pageData.sideTitle = '修改SOP审核员'
    nextTick(() => {
        let data = {
            corporateId: record.companyId,
            corporateLabel: record.companyName,
        }
        corPor.value.parentComponent(data)
    })
}

const formRef = ref()
const sideOk = () => {
    formRef.value?.validate().then((err: any) => {
        if (!err) {
            post({
                url: '/qms/inspectionEmployee/saveOrUpdateInspectionEmployee',
                data: dataForm
            }).then(({ code, message }) => {
                if (code == 200) {
                    Message.success('成功')
                    pageData.showAdd = false
                    doRefresh()
                } else {
                    Message.error(message)
                }
            })
        }
    })
}

//删除
const deleteHandle = () => {
    if (gridOption.value.getSelectedRows().length === 0) {
        Message.error('请勾选数据')
        return false
    }
    Modal.confirm({
        title: '系统提示',
        content: '确认删除选中的数据?',
        onOk: () => {
            post({
                url: '/qms/inspectionEmployee/delInspectionEmployees',
                data: gridOption.value.getSelectedRows().map((res: any) => res.id),
            }).then((res: any) => {
                if (res.code == 200) {
                    Message.success('删除成功')
                    doRefresh()
                } else Message.error(res.message)
            })
        },
    })
}

//公司
const corPor: any = ref()
const configCascader = ref<{}>({
    corporateWidth: '280px', //公司宽度
    corporateRquired: true, //公司是否必填
    size: 'medium', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '所属公司', //公司label
    cascaderShow: 'sector', //配置部门不显示
    corporateNameLabelWidth: '80px',
})
const changeCascader = (data: any) => {
    const { corporateId, corporateLabel } = data
    dataForm.companyId = corporateId
    dataForm.companyName = corporateLabel
    if (dataForm.companyName == '') {
        dataForm.employeeCode = ''
        dataForm.employeeName = ''
    }
}

//员工
const getUsers = (val: any) => {
    post({
        url: 'org/hrEmployee/getPage',
        data: {
            deleteState: 0,
            obsoleteState: 0,
            company_id: '',
            department_id: '',
            ygText: val,
            page: 1,
            size: 30
        }
    }).then(({ data, code }: any) => {
        if (code === 200) {
            pageData.empList = data.list
        } else {
            Message.error({
                content: '该部门无员工信息！',
                duration: 5000,
            })
        }
    })
}

const changeEmp = (num: any) => {
    if (num == 0) {
        if (dataForm.employeeCode != '') {
            dataForm.employeeName = pageData.empList.find((o: any) => o.code === dataForm.employeeCode).name
            dataForm.companyId = pageData.empList.find((o: any) => o.code === dataForm.employeeCode).companyId
            dataForm.companyName = pageData.empList.find((o: any) => o.code === dataForm.employeeCode).companyName
        } else {
            dataForm.employeeName = ''
            dataForm.companyId = null
            dataForm.companyName = ''
        }
    } else {
        if (dataForm.employeeName != '') {
            dataForm.employeeCode = pageData.empList.find((o: any) => o.name === dataForm.employeeName).code
            dataForm.companyId = pageData.empList.find((o: any) => o.code === dataForm.employeeCode).companyId
            dataForm.companyName = pageData.empList.find((o: any) => o.code === dataForm.employeeCode).companyName
        } else {
            dataForm.employeeCode = ''
            dataForm.companyId = null
            dataForm.companyName = ''
        }
    }
}
</script>
<style lang='less' scoped>
:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

:deep(.arco-table-td-content) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}</style>